<template>
  <div>
    <div class="head"><h1>今日账号审核通过列表</h1></div>
    <div class="content">
      <div class="select">
        <el-form :model="queryParams" class="queryParams">
          <el-input
            type="text"
            placeholder="请输入申请人姓名"
            v-model="queryParams.name"
          />
          <el-button type="primary" @click="handleSearch()">查询</el-button>
          <el-button type="primary" @click="handleHistory()">检索</el-button>
        </el-form>
      </div>
      <el-table
        :data="items"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="username" label="账号" width="110" />
        <el-table-column prop="name" label="姓名" width="80" />
        <el-table-column prop="atime" label="申请时间" show-overflow-tooltip />
        <el-table-column prop="ptime" label="通过时间" show-overflow-tooltip />
      </el-table>
    </div>
    <div class="foot">
      <ul>
        <li>注：本数据每天实时更新</li>
        <li>注：检索可查询历史通过账号</li>
        <li>注：未查到通过信息即暂未通过审核，请耐心等待</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { registerPassed, finByName, finByNameAll } from "@/api/login";
export default {
  data() {
    return {
      queryParams: {},
      items: [],
    };
  },
  created() {
    this.queryList();
  },
  methods: {
    queryList() {
      registerPassed().then((res) => {
        res.data.data.forEach((item) => {
          item.atime = item.atime.slice(0, 10);
          item.ptime = item.ptime.slice(0, 10);
        });
        this.items = res.data.data;
      });
    },
    handleSearch() {
      if (this.queryParams.name == undefined) {
        this.queryList();
        this.$message({
          type: "warning",
          message: "请输入申请人姓名!",
        });
      } else {
        finByName({ name: this.queryParams.name }).then((res) => {
          res.data.data.forEach((item) => {
            item.atime = item.atime.slice(0, 10);
            item.ptime = item.ptime.slice(0, 10);
          });
          this.items = res.data.data;
        });
      }
    },
    handleHistory() {
      if (this.queryParams.name == undefined) {
        this.queryList();
        this.$message({
          type: "warning",
          message: "请输入申请人姓名!",
        });
      } else {
        finByNameAll({ name: this.queryParams.name }).then((res) => {
          res.data.data.forEach((item) => {
            item.atime = item.atime.slice(0, 10);
            item.ptime = item.ptime.slice(0, 10);
          });
          this.items = res.data.data;
          this.queryParams = {};
        });
      }
    },
  },
};
</script>
<style>
.queryParams {
  display: flex;
  margin-bottom: 20px;
  flex-direction: row;
  width: 100%;
}
.queryParams .el-input {
  margin-left: 25px;
  width: 50%;
}
.queryParams .el-button {
  margin-left: 10px;
}
.head {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
h1 {
  font-weight: 600;
  font-size: 25px;
  font-family: "楷体";
}
.content {
  width: 100%;
  height: 500px;
}
.foot ul {
  list-style: none;
}
</style>
